<!-- 默认用户 -->
<template>
    <div class="app-container">
        <el-button
            type="primary"
            style="margin-bottom: 10px"
            size="small"
            @click="onShow"
        >
            新增
        </el-button>
        <el-tabs v-model="type" @tab-click="handleClick">
          <el-tab-pane label="财务审批人" name="1"></el-tab-pane>
          <el-tab-pane label="案件审批人" name="2"></el-tab-pane>
          <el-tab-pane label="用印审批人" name="3"></el-tab-pane>
        </el-tabs>

        <el-table :data="defaultList" :loading="loading">
            <el-table-column
                label="用户编号"
                align="center"
                key="userId"
                prop="userId"
            />
            <el-table-column
                label="用户名称"
                align="center"
                key="userName"
                prop="userName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="用户昵称"
                align="center"
                key="nickName"
                prop="nickName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="部门"
                align="center"
                key="deptName"
                prop="dept.deptName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="手机号码"
                align="center"
                key="phonenumber"
                prop="phonenumber"
                width="120"
            />
            <el-table-column
                label="操作"
                align="center"
                width="120"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        @click="onDel(scope.row.userId)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog width="80vw" title="选择默认用户" :visible.sync="showDialog">
            <el-table
                :data="allUser"
                ref="chooseTable"
                height="50vh"
                row-key="userId"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column
                    label="用户名称"
                    align="center"
                    key="userName"
                    prop="userName"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="用户昵称"
                    align="center"
                    key="nickName"
                    prop="nickName"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="部门"
                    align="center"
                    key="deptName"
                    prop="dept.deptName"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    label="手机号码"
                    align="center"
                    key="phonenumber"
                    prop="phonenumber"
                    width="120"
                />
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="onSave" :loading="loading"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getAllUser } from "@/api/met";
// import { getDefaultList, saveDefault } from ""
import { defaultList, setDefault, delDefault } from "@/api/case/case";
export default {
    data() {
        return {
            allUser: [],
            showDialog: false,
            defaultList: [],
            chooseList: [],
            loading: false,
            type: '1'
        };
    },
    components: {},
    computed: {},
    methods: {
        handleClick () {
            this.getDefaultList()
        },
        onDel(userId) {
            this.$modal.confirm("是否确认删除").then(() => {
                delDefault([userId], this.type).then((res) => {
                    this.$message.success("删除成功");
                    this.getDefaultList();
                });
            });
        },
        handleSelectionChange(e) {
            this.chooseList = e;
        },
        getAllUser() {
            getAllUser().then((res) => {
                this.allUser = res.data;
            });
        },
        onSave() {
            let userIds = this.chooseList.map((v) => v.userId);
            this.loading = true;
            setDefault(userIds, this.type)
                .then((res) => {
                    this.$message.success("保存成功");
                    this.showDialog = false;
                    this.getDefaultList();
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        getDefaultList() {
            this.loading = true
            defaultList({ type: this.type }).then((res) => {
                this.defaultList = res.data;
            }).finally(res=> {
                this.loading = false
            })
        },
        onShow() {
            this.showDialog = true;
            let ids = this.defaultList.map((v) => v.userId);
            this.$nextTick(() => {
                this.allUser.map((v) => {
                    if (ids.includes(v.userId)) {
                        this.$refs.chooseTable.toggleRowSelection(v, true);
                    }
                });
            });
        },
    },
    mounted() {
        this.getAllUser();
        this.getDefaultList();
    },
};
</script>
<style lang='less' scoped>
</style>
